<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<title>钩子函数参数</title>
</head>
<body>
<div id="app" v-demo:foo.a.b="message"></div>

<div id="baseexample">
  <p>Scroll down the page</p>
  <p v-pin="200">Stick me 200px from the top of the page</p>
</div>
<p>--------动态指令参数----------------</p>
<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>
</body>
</html>
<script type="text/javascript">
	Vue.directive('demo', {
	  bind: function (el, binding, vnode) {
	    var s = JSON.stringify
	    el.innerHTML =
	      'name: '       + s(binding.name) + '<br>' +
	      'value: '      + s(binding.value) + '<br>' +
	      'expression: ' + s(binding.expression) + '<br>' +
	      'argument: '   + s(binding.arg) + '<br>' +
	      'modifiers: '  + s(binding.modifiers) + '<br>' +
	      'vnode keys: ' + Object.keys(vnode).join(', ')
	  }
	})

	new Vue({
	  el: '#app',
	  data: {
	    message: 'hello!'
	  }
	})

	Vue.directive('pin', {
	  bind: function (el, binding, vnode) {
	    el.style.position = 'fixed'
	    el.style.top = binding.value + 'px'
	  }
	})

	new Vue({
	  el: '#baseexample'
	})

	Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      direction: 'left'
    }
  }
})
</script>